<!-- directive:title 经常使用的20个css高级技巧 -->
<!-- directive:breadcrumb 经常使用的20个css高级技巧 -->
<div class="panel-body">
    <div class="row">
        <div class="col-sm-6">
            <div class='panel panel-default'>
                <div class='panel-heading'> 黑白图像 </div>
                <div class='panel-body'>
                    <img src="../../images/logo.renliyou.png" alt="" style="width:60%;" class="aa1" />
                    <style type="text/css" ui-bs>
                        img.aa1 {
                            filter: grayscale(100%);
                            -webkit-filter: grayscale(100%);
                            -moz-filter: grayscale(100%);
                            -ms-filter: grayscale(100%);
                            -o-filter: grayscale(100%);
                        }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 最后一个没有边框</div>
                <div class='panel-body'>
                    <ul class="aa2"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
                    <style type="text/css" ui-bs>
                        .aa2 li { display:inline-block;border-right: 3px solid red; }
                        .aa2 li:last-child { border-right: none; }
                    </style>
                    <ul class="aa3"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
                    <p>可以直接使用 :not() 伪类来应用元素</p>
                    <style type="text/css" ui-bs>
                        .aa3 li { display:inline-block; }
                        .aa3 li:not(:last-child) { border-right: 3px solid red; }
                    </style>
                    <ul class="aa4"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
                    <p>最简便的：使用通用的兄弟选择符（~）</p>
                    <style type="text/css" ui-bs>
                        .aa4 li { display:inline-block; }
                        .aa4 li:first-child ~ li { border-left: 3px solid red; }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 页面顶部阴影 </div>
                <div class='panel-body'>
                    <style type="text/css" ui-bs>
                        body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.4); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.4); box-shadow: 0px 0px 10px rgba(0,0,0,.4); z-index: 100000; }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 逗号分隔的列表 </div>
                <div class='panel-body'>
                    <ul class="aa5"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
                    <style type="text/css" ui-bs>
                        ul.aa5 li { display:inline-block; }
                        ul.aa5 > li:not(:last-child)::after { content: ","; }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 负的 nth-child 选择项目 </div>
                <div class='panel-body'>
                    <ul class="aa6"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
                    <style type="text/css" ui-bs>
                        ul.aa6 li { display:inline-block; }
                        ul.aa6 li:nth-child(-n+3) { color:red; }
                    </style>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class='panel panel-default'>
                <div class='panel-heading'> 优化显示文本 </div>
                <div class='panel-body'>
                    <style type="text/css" ui-bs>
                        html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 当a元素没有文本值，但 href 属性有链接的时候显示链接 </div>
                <div class='panel-body'>
                    <a href="http://www.baidu.com">哇哈哈哈...</a>||<a href="http://www.baidu.com"></a>
                    <script type="text/js" ui-bs>
                        <a href="http://www.baidu.com">哇哈哈哈...</a>||<a href="http://www.baidu.com"></a>
                    </script>
                    <style type="text/css" ui-bs>
                        a[href^="http"]:empty::before { content: attr(href); }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> CSS3 calc() 的使用  </div>
                <div class='panel-body'>
                    <style type="text/xianscs" ui-bs>
                        /* basic calc */
                        .simpleBlock { width: calc(100% - 100px); }
                        /* calc in calc */
                        .complexBlock { width: calc(100% - 50% / 3); padding: 5px calc(3% - 2px); margin-left: calc(10% + 10px); }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 文本渐变 </div>
                <div class='panel-body'>
                    <h2 data-text>http://www.baidu.com</h2>
                    <style type="text/css" ui-bs>
                        h2[data-text] { position: relative; }
                        h2[data-text]::after { content: attr(data-text); z-index: 10; color: #e3e3e3; position: absolute; top: 0; left: 0; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));}
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 禁用鼠标事件 </div>
                <div class='panel-body'>
                    <a class="disabled" href="http://www.baidu.com">哇哈哈哈...</a>
                    <style type="text/css" ui-bs>
                        a.disabled { pointer-events: none; }
                    </style>
                </div>
            </div>
            <div class='panel panel-default'>
                <div class='panel-heading'> 模糊文本 </div>
                <div class='panel-body'>
                    <p class="blur">hahahaaha</p>
                    <style type="text/css" ui-bs>
                        p.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5); }
                    </style>
                </div>
            </div>
        </div>
    </div>
</div>
